.svg-gauge {
	$transition: .5s ease-in-out;

	fill: $font-color;

	.svg-gauge-description {
		text-align: center;
		white-space: nowrap;
		color: $font-color;

		div {
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.svg-gauge-thresholds-arc-sector,
	.svg-gauge-empty-arc-sector {
		fill: $gauge-empty-color;
	}

	.svg-gauge-value-arc-sector {
		fill: $gauge-fill-color;
	}

	.svg-gauge-value-arc-sector,
	.svg-gauge-empty-arc-sector {
		transition: fill $transition;
	}

	.svg-gauge-needle {
		fill: $gauge-needle-fill-color;
		stroke: $gauge-needle-stroke-color;
		vector-effect: non-scaling-stroke;
		transition: fill $transition, stroke $transition;

		&.svg-gauge-needle-light {
			stroke: rgba(0, 0, 0, 0.2);
		}

		&.svg-gauge-needle-dark {
			stroke: rgba(255, 255, 255, 0.3);
		}
	}

	.svg-gauge-label-left {
		text-anchor: end;
	}

	.svg-gauge-label-center {
		text-anchor: middle;
	}

	.svg-gauge-value-and-units {
		text-align: center;
		white-space: nowrap;
		color: $font-color;

		> div {
			margin: auto;
			overflow: hidden;
			text-overflow: ellipsis;

			.svg-gauge-value {
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.svg-gauge-value-and-units-horizontal {
		.svg-gauge-value,
		.svg-gauge-units {
			display: inline;
		}

		.svg-gauge-space {
			display: inline-block;
		}
	}

	.svg-gauge-value-and-units-vertical {
		.svg-gauge-value,
		.svg-gauge-units {
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.svg-gauge-no-data {
		text-anchor: middle;
		fill: $font-alt-color;
	}
}

// Modifications by themes.

@if $theme-name == 'dark' or $theme-name == 'hc-dark' {
	.svg-gauge {
		.svg-gauge-needle {
			&.svg-gauge-needle-dark {
				stroke: rgba(255, 255, 255, 0.2);
			}
		}
	}
}
